<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/taglib.jsp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <title>聚人消费网络有限公司</title>
    <!--[if IE 8]>
    <script type='text/javascript' src='${ctx}/js/excanvas.js'></script>
    <link rel="stylesheet" href="${ctx}/css/IEfix.css" type="text/css" media="screen" />
    <![endif]-->

    <!--[if IE 7]>
    <script type='text/javascript' src='${ctx}/js/excanvas.js'></script>
    <link rel="stylesheet" href="${ctx}/css/IEfix.css" type="text/css" media="screen" />
    <![endif]-->
    <link type="text/css" href="${ctx}/css/style.css" rel="stylesheet"/>
    <!-- the layout css file -->
    <link type="text/css" href="${ctx}/css/jquery.cleditor.css" rel="stylesheet"/>

    <script type='text/javascript' src='${ctx}/js/jquery-1.4.2.min.js'></script>
    <!-- jquery library -->
    <script type='text/javascript' src='${ctx}/js/jquery-ui-1.8.5.custom.min.js'></script>
    <!-- jquery UI -->
    <script type='text/javascript' src='${ctx}/js/cufon-yui.js'></script>
    <!-- Cufon font replacement -->
    <script type='text/javascript' src='${ctx}/js/colaboratelight_400.font.js'></script>
    <!-- the Colaborate Light font -->
    <script type='text/javascript' src='${ctx}/js/easytooltip.js'></script>
    <!-- element tooltips -->
    <script type='text/javascript' src='${ctx}/js/jquery.tablesorter.min.js'></script>
    <!-- tablesorter -->
     <script type="text/javascript" src='${ctx}/js/jquery.validate.js'></script>


    <script type='text/javascript' src='${ctx}/js/visualize.jquery.js'></script>
    <!-- visualize plugin for graphs / statistics -->
    <script type='text/javascript' src='${ctx}/js/iphone-style-checkboxes.js'></script>
    <!-- iphone like checkboxes -->
    <script type='text/javascript' src='${ctx}/js/jquery.cleditor.min.js'></script>
    <!-- wysiwyg editor -->

    <script type='text/javascript' src='${ctx}/js/custom.js'></script>
    <!-- the "make them work" script -->

    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery("#birthday").datepicker({ dateFormat: 'yy-mm-dd',
                dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                changeYear : true });
//            bindValidate("userName", "请输入用户名");
//            bindValidate("password", "请输入密码");
//            bindValidate("nickName", "请输入姓名");
//            bindValidate("job", "请输入职业");
//            bindValidate("idCard", "请输入身份证");
//            bindValidate("phone", "请输入联系方式");
//            bindValidate("address", "请输入地址");
//            bindValidate("birthday", "请选择生日");
        });

        function check(value, name, message) {
            if (value == "") {
                jQuery("#" + name + "Tip").html(message);
                jQuery("#" + name + "Tip").attr("class", "validate_error");
                return false;
            } else {
                jQuery("#" + name + "Tip").html("");
                return true;
            }
        }
        //表单提交验证
        function validate() {
            if (!check(jQuery("#userName").val(), "userName", "请输入用户名")) {
                return false;
            }
            if (!check(jQuery("#password").val(), "password", "请输入密码")) {
                return false;
            }
            if (!check(jQuery("#nickName").val(), "nickName", "请输入姓名")) {
                return false;
            }
            if (!check(jQuery("#idCard").val(), "idCard", "请输入身份证")) {
                return false;
            }
            if (!check(jQuery("#phone").val(), "phone", "请输入联系方式")) {
                return false;
            }
            if (!check(jQuery("#address").val(), "address", "请输入地址")) {
                return false;
            }
            if (!check(jQuery("#birthday").val(), "birthday", "请选择生日")) {
                return false;
            }
            if (!check(jQuery("#job").val(), "job", "请输入职业")) {
                return false;
            }


        }


        //绑定表单验证事件
        function bindValidate(name, message) {
            jQuery("#" + name).blur(function () {
                check(this.value, name, message);
            });
        }
    </script>
    <meta charset="UTF-8">

</head>

<body>

<div id="container">
    <div id="bgwrap">

        <div id="primary_left">

            <div id="logo">
                <a href="#" title="Dashboard"><img src="${ctx}/assets/LogoMaker.png" width="220" height="48" alt=""/></a>
            </div>
            <!-- logo end -->

            <div id="menu"> <!-- navigation menu -->
                <ul>
                    <li><a href="${ctx}/forward/index/html" class="dashboard"><img
                            src="${ctx}/assets/icons/small_icons_3/dashboard.png" alt=""/><span
                            class="current">首页</span></a></li>
                    <li class="current"><a href="${ctx}/user/userManager" class="dashboard"><img
                            src="${ctx}/assets/icons/small_icons_3/users.png" alt=""/><span
                            class="current">用户管理</span></a></li>
                    <li><a href="${ctx}/album" class="dashboard"><img
                            src="${ctx}/assets/icons/small_icons_3/media.png" alt=""/><span
                            class="current">产品图片管理</span></a></li>
                    <li class="fade_hover tooltip" title="返回网站主页">
                        <a href="${ctx}">
                            <img src="${ctx}/assets/icons/dashboard/back.png" alt=""/>
                            <span>返回网站主页</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- navigation menu end -->
        </div>
        <!-- sidebar end -->
        <div id="primary_right">
            <div class="inner" style="width: 78%;">



                <ul class="dash">
                    <li class="fade_hover tooltip" title="返回用户管理">
                        <a href="${ctx}/user/userManager">
                            <img src="${ctx}/assets/icons/dashboard/back.png" alt=""/>
                            <span>返回用户管理</span>
                        </a>
                    </li>

                    <li class="fade_hover tooltip " title="退出系统">
                        <a href="${ctx}/user/logout">
                            <img src="${ctx}/assets/icons/dashboard/118.png" alt=""/>
                            <span>注销</span>
                        </a>
                    </li>
                </ul>
                <!-- end dashboard items -->


                <div class="clearboth"></div>

                <hr/>

                 <span style="font-size: 28px;font-weight: bold;">用户添加</span>
                <form action="${ctx}${action!=null ? action : ""}" method="post" onsubmit="return validate();" style="margin-top: 15px;">
                      <input name="token" type="hidden" value="${token}"/>
                    <c:if test="${editUser!=null}">
                        <input type="hidden" name="id" value="${editUser.id}">
                    </c:if>

                    <fieldset>
                        <p>
                            <label>用户名：</label>
                            <input class="sf" name="userName" id="userName" type="text"
                                   value="${editUser!=null  ? editUser.userName: ""}"/>
                            <span class="field_desc" id="userNameTip"></span>
                        </p>

                        <p>
                            <label>密码：</label>
                            <input class="sf" name="password" type="password" id="password"
                                   value="${editUser!=null ? editUser.password : ""}"/>
                            <span class="field_desc" id="passwordTip"></span>
                        </p>

                        <p>
                            <label>姓名：</label>
                            <input class="sf" name="nickName" type="text" id="nickName"
                                   value="${editUser!=null ? editUser.nickName : ""}"/>
                            <span class="field_desc" id="nickNameTip"></span>
                        </p>

                        <p>
                            <label>身份证：</label>
                            <input class="sf" name="idCard" type="text" id="idCard"
                                   value="${editUser!=null ? editUser.idCard: ""}"/>
                            <span class="field_desc" id="idCardTip"></span>
                        </p>

                        <p>
                            <label>联系方式：</label>
                            <input class="sf" name="phone" type="text" id="phone"
                                   value="${editUser!=null ? editUser.phone: ""}"/>
                            <span class="field_desc" id="phoneTip"></span>
                        </p>

                        <p>
                            <label>地址：</label>
                            <input class="sf" name="address" type="text" id="address"
                                   value="${editUser!=null ? editUser.address: ""}"/>
                            <span class="field_desc" id="addressTip"></span>
                        </p>

                        <p>
                            <label>生日：</label>
                            <input  name="birthday" type="text" id="birthday"
                                   value="${editUser!=null ? editUser.birthday: ""}"/>
                            <span class="field_desc" id="birthdayTip"></span>
                        </p>

                        <p>
                            <label>职业：</label>
                            <input class="sf" name="job" type="text" id="job"
                                   value="${editUser!=null ? editUser.job : ""}"/>
                            <span class="field_desc" id="jobTip"></span>
                        </p>

                        <p>
                            <label>性别：</label>

                            <input type="radio" name="sex" value="1" checked="checked"/>男
                            <input type="radio" name="sex" value="0"/>女
                           <c:if test="${editUser!=null}">
                            <script>
                                var sex = document.getElementsByName("sex");
                                var sexValue ="${editUser.sex}";
                                for (var i = 0; i < sex.length; i++) {
                                    if (sex[i].value == sexValue) {
                                        sex[i].checked = true;
                                    }
                                }
                            </script>
                          </c:if>
                        </p>
                        <p>
                            <label>关联用户:</label>
                            <select name="relation" class="dropdown">
                                <option value="0">请选择关联用户</option>
                                <c:set var="relationID" value="0" scope="page"/>
                                <c:if test="${relationID!=null}">
                                    <c:set value="${relationID}" var="relationID"/>
                                </c:if>
                                <c:forEach var="user" items="${users}">
                                      <option ${user.id eq relationId ? "selected=\"selected\"" : ""}
                                        value="${user.id}">${user.nickName}
                                </option>
                                </c:forEach>
                            </select>
                        </p>
                        <div class="clearboth"></div>

                        <p><input class="button" type="submit" value="提交"/> <input class="button" type="reset"
                                                                                   value="重置"/></p>
                    </fieldset>
                </form>
                <div class="clearboth"></div>


            </div>
            <!-- inner -->
        </div>
        <!-- primary_right -->
    </div>
    <!-- bgwrap -->
</div>
<!-- container -->
</body>
</html>
